import React,{useEffect, useState} from 'react'
import { useNavigate } from 'react-router-dom'
import { getCurrentCity } from '../../utils'
import './index.scss'

export default function SearchBar({color}) {
    const navigate = useNavigate()
    async function getCurCity() {
        const city = await getCurrentCity()
        setCurCity(city.label)
    }
    useEffect(() => {
        getCurCity()
    },[])
    const [curCity, setCurCity] = useState((JSON.parse(localStorage.getItem('hkzf_city'))).label)
    return (
        <div className='home__search'>
            <div className='home__search__content'>
                <div className='home__search__location' onClick={() => { navigate('/citylist') }}>
                    <span className='name'>{curCity}</span>
                    <i className='iconfont icon-arrow'></i>
                </div>
                <div className='home__search__form' onClick={() => { navigate('/search') }}>
                    <i className='iconfont icon-seach'></i>
                    <span className='text'>请输入小区或地址</span>
                </div>
            </div>
            <i className='iconfont icon-map' style={{color: color? color : ''}} onClick={() => { navigate('/map') }}></i>
        </div>
    )
}
